<template>
    <div class="wrapper">
        <!-- 基本信息 -->
        <div class="static_div">
            <el-card class="box-card">
                <div class="cart-title">基本信息</div>
                <el-table :data="state.tableData" style="width: 100%; margin-top: 20px">
                    <el-table-column fixed prop="id" label="仓库ID"></el-table-column>
                    <el-table-column prop="name" label="仓库名称"></el-table-column>
                    <el-table-column prop="type" label="仓库类型"></el-table-column>
                    <el-table-column prop="supplier" label="关联物流商"></el-table-column>
                    <el-table-column prop="owner" label="所属人"></el-table-column>
                    <el-table-column prop="contact" label="联系人"></el-table-column>
                    <el-table-column prop="phone" label="联系电话"></el-table-column>
                    <el-table-column prop="address" label="仓库地址"></el-table-column>
                </el-table>
            </el-card>
        </div>
        <!-- 库存商品 -->
        <div class="static_div m-t">
            <el-card class="box-card">
                <div class="cart-title">仓库商品</div>
                <el-table :data="state.invenPro" style="width: 100%; margin-top: 20px">
                    <el-table-column fixed prop="date" label="商品ID"></el-table-column>
                    <el-table-column prop="name" label="商品名称"></el-table-column>
                    <el-table-column prop="name" label="商品规格"></el-table-column>
                    <el-table-column prop="province" label="批次号"></el-table-column>
                    <el-table-column prop="province" label="库存"></el-table-column>
                    <el-table-column prop="zip" label="本期库存"></el-table-column>
                    <el-table-column prop="province" label="进价"></el-table-column>
                    <el-table-column prop="province" label="售价"></el-table-column>
                </el-table>
            </el-card>
        </div>
        <!-- 库存记录 -->
        <div class="static_div m-t">
            <el-card class="box-card">
                <div class="cart-title">库存记录</div>
                <el-table
                        :data="state.invenRecord"
                        style="width: 100%; margin-top: 20px"
                >
                    <el-table-column fixed prop="date" label="ID"></el-table-column>
                    <el-table-column prop="name" label="商品名称"></el-table-column>
                    <el-table-column prop="name" label="商品规格"></el-table-column>
                    <el-table-column prop="province" label="重量（KG）"></el-table-column>
                    <el-table-column prop="zip" label="批次号"></el-table-column>
                    <el-table-column prop="name" label="库存类型"></el-table-column>
                    <el-table-column prop="province" label="库存来源"></el-table-column>
                    <el-table-column prop="zip" label="完成时间"></el-table-column>
                    <el-table-column prop="name" label="状态"></el-table-column>
                    <el-table-column prop="province" label="备注"></el-table-column>
                    <el-table-column prop="zip" label="操作人"></el-table-column>
                </el-table>
            </el-card>
        </div>
    </div>
</template>

<script>
    import {reactive} from "vue";

    export default {
        name:"ware_detail",
        components: {},
        setup() {
            let state = reactive({
                tableData: [
                    {
                        id: 1,
                        type: "逻辑仓1",
                        name: "仓库名称",
                        owner: "王小虎",
                        supplier: "天津有限公司",
                        address: "上海市普陀区金沙江路 1518 弄",
                        phone: '1522222222',
                        contact: '张三',
                        count: 80,
                    },
                    {
                        id: 2,
                        type: "逻辑仓2",
                        name: "仓库名称",
                        owner: "王小",
                        supplier: "张华有限公司",
                        address: "上海市普陀区金沙江路 1518 弄",
                        phone: '1522222222',
                        contact: '张三',
                        count: 80,
                    },
                ],
                invenPro: [
                    {
                        date: "2016-05-03",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                    },
                    {
                        date: "2016-05-03",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                    },
                ],
                invenRecord: [
                    {
                        date: "2016-05-03",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                    },
                    {
                        date: "2016-05-03",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                    },
                ],
            });
            return {
                state,
            };
        },
    };
</script>
<style lang="scss" scoped>
    .wrapper {
        height: 100%;
        .m-t {
            margin-top: 10px;
        }
        .static_div {
            width: 100%;
            .cart-title {
                display: flex;
            }
            .cart-title::before {
                content: " ";
                width: 4px;
                height: 20px;
                background: #1890ff;
                background: #1890ff;
                display: inline-block;
                vertical-align: middle;
                margin-right: 5px;
            }
            .el-table /deep/ th {
                background-color: #eaeaea;
                text-align: center;
            }
            .el-table /deep/ td {
                text-align: center;
            }
        }
    }
</style>